<script setup>
  import PageLayout from '@/components/PageLayout.vue'
  import { ref, onMounted, useTemplateRef, computed } from 'vue'
  import { getLibraryList, getRoomList, addLecture, getLectureList, registerLecture } from '@/api'
  import { ElMessage } from 'element-plus'
  import { ElMessageBox } from 'element-plus'

  const libraryList = ref([])
  const roomList = ref([])
  const lectureList = ref([])
  const libraryId = ref('')
  const classroomId = ref('')
  const loading = ref(false)

  const showLectureList = computed(() => {
    return lectureList.value.map(item => {
      const {
        title,
        content,
        lecturer,
        libraryName,
        classroomName,
        startTime,
        endTime,
        participantLimit,
        currentRegistrations,
      } = item
      return {
        id: item.id,
        title: ['讲座名称:', title],
        content: [
          [
            ['讲座内容:', content],
            ['讲师:', lecturer],
          ],
          [
            ['讲座人数', participantLimit],
            ['已报名人数', currentRegistrations],
          ],
          [['讲座地点:', `${libraryName} - ${classroomName}`]],
          [['讲座开始时间:', startTime]],
          [['讲座结束时间:', endTime]],
        ],
      }
    })
  })

  const onChangeLibrary = () => {
    classroomId.value = ''
    if (libraryId.value) {
      handleGetRoomList()
    }
    handleGetLectureList()
  }

  const handleGetRoomList = () => {
    getRoomList({ libraryId: libraryId.value }).then(res => {
      roomList.value = res.data
        .filter(item => item.roomType === 0 && item.roomStatus === 1)
        .map(item => ({ label: item.name, value: item.id }))
    })
  }

  const handleGetLectureList = () => {
    loading.value = true
    getLectureList().then(res => {
      let list = res.data
      if (libraryId.value) list = list.filter(item => item.libraryId === libraryId.value)
      if (classroomId.value) list = list.filter(item => item.classroomId === classroomId.value)
      lectureList.value = list
    })
     .finally(() => {
      loading.value = false
     })
  }

  const onRegister = id => {
    ElMessageBox.confirm('确认报名该讲座吗？', '提示').then(() => {
      registerLecture(id).then(res => {
        ElMessage.success('报名成功')
      })
    })
  }

  onMounted(() => {
    getLibraryList().then(res => {
      libraryList.value = res.data.map(item => ({ label: item.name, value: item.id }))
    })
    handleGetLectureList()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="handleGetLectureList">刷新</el-button>
      <el-select
        v-model="libraryId"
        placeholder="选择开办图书馆"
        style="width: 200px"
        @change="onChangeLibrary"
        clearable
      >
        <el-option v-for="item in libraryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select
        v-model="classroomId"
        placeholder="选择教室"
        style="width: 200px"
        @change="handleGetLectureList"
        clearable
      >
        <el-option v-for="item in roomList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </template>

    <div class="count">当前共有{{ lectureList.length }}个讲座</div class="count">
    <div class="lecture-container" v-loading="loading">
      <info-card v-for="(item, idx) in showLectureList" :key="idx" :data="item" class="shadow">
        <el-button type="info" @click="onRegister(item.id)">报名</el-button>
      </info-card>
    </div>
  </page-layout>
</template>

<style scoped lang="less">
  .lecture-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(400px, 1fr));
  }

  .count {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-600);
    border-radius: var(--round-2);
    background-color: #fff;
  }
</style>
